<template>
	<view class="w-100">
		<u-navbar :autoBack="true" :title="title" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight"/>
		<view class="w-100 p-10 border-box">
			<view class="flex justify-between flex-wrap">
				<view class="bg-white radius-5 margin-bottom-sm goods-item flex flex-direction"
					v-for="(item, index) in productList" :key="index" @click="toGoodsDetails(item)">
					<view class="goods-img p-5 border-box">
						<image :src="item.mainImageUrl" class="goods-img"></image>
					</view>
					<view class="padding-lr padding-tb-sm flex flex-direction justify-between flex-sub">
						<view class="text-cut2">
							<text class="font-26 text-bold">{{item.productName}}</text>
						</view>
						<view class="margin-top-sm">
							<view class="flex justify-between align-center">
								<view class="flex align-center text-theme text-bold">
									<text class="font-28">￥</text>
									<text class="font-28">{{item.price}}</text>
								</view>
								<view class="color-g noUse">￥{{item.productPrice}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty :show="productList.length == 0" />
			<u-loadmore color="#cccccc" :status="status" />
		</view>
	</view>
</template>

<script>
	import { productList } from '@/common/api/product.js'
	import onlineServiceMixin from '@/common/mixins/onlineServiceMixin.js'
	export default {
		mixins: [
			onlineServiceMixin
		],
		data() {
			return {
				bannerList: [{
					image: '/static/goods/explosive/banner.png'
				}, {
					image: '/static/goods/explosive/lottery.png'
				}],
				tabId: 0,
				current: 0,
				goodsList: [],
				pageNo: 0,
				status: 'loading',
				keyword: '',
				productCateList: [],
				productList: [],
				cateId: '',
				areaId: '',

				flterTab: null,
				isActive: null,
				sort: null,
				isAsc: null,
				searchKeyWord: true,
				title: null,
			};
		},
		onLoad(options) {
			if(options.title){
				this.title = options.title
			}
			if(options.areaId){
				this.areaId = options.areaId
			}
			this.getProductList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.tabId = 0
			this.current = 0
			this.cateId = ''
			this.keyword = ''
			this.reset()
			this.getProductList()
			// 关闭下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			this.getProductList()
		},
		methods: {
			backPage(){
				uni.navigateBack()
			},
			//更改id
			productCateListChange(cateId) {
				this.cateId = cateId
				this.productList = []
				this.pageNo = 0
				this.getProductList()
			},
			// 筛选
			filterClick(index) {
				this.flterTab = index
				this.sort = index // 排序
				if (index == 3 ||index == 2||index == 4) {
					if (this.isActive == 1) {
						this.isActive = 2
						this.isAsc = false
					} else {
						this.isActive = 1
						this.isAsc = true
					}
				} else if (index == 1) {
					this.isActive = null
					this.isAsc = null
				} 
				this.productList = []
				this.pageNo = 0
				this.getProductList()
			},
			getProductCate(parentCateId) {
				productCate({
					level: parentCateId ? 2 : 1,
					parentCateId: parentCateId || ''
				}).then(res => {
					this.productCateList = res.data
					console.log(this.productCateList, "this.productCateList")
				})
			},
			getProductList() {
				this.status = 'loading'
				this.pageNo++
				productList({
					pageNo: this.pageNo,
					pageSize: 10,
					areaId: this.areaId
				}).then(res => {
					this.productList = this.productList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			reset() {
				this.productList = []
				this.pageNo = 0
			},
			hanldeTab(item, index) {
				this.current = index
				this.cateId = item.cateId
				this.reset()
				this.getProductList()
			},
			toLottery(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/goods/explosive/lottery/lotteryIndex'
					})
				}
			},
			toGoodsDetails(item) {
				uni.navigateTo({
					url: '/pages/product/productDetails?productId=' + item.productId
				})
			},
			toSearch() {
				this.tabId = 0
				this.current = 0
				this.reset()
				this.getProductList()
			},
		}

	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.filterBox {
		line-height: 80rpx;
		justify-content: space-between;
	}

	::v-deep .u-navbar__content__right {
		width: 66% !important;
	}

	::v-deep .u-input__right-icon {
		display: flex;
		align-items: center;
	}

	.tabActive {
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		height: 50rpx;
	}

	.boxFiler ::v-deep .uicon-arrow-up {
		position: relative;
		top: 6rpx !important;
	}
	.boxFiler ::v-deep .uicon-arrow-down{
		position: relative;
		top: -4rpx !important;
	}

	.boxFiler {
		margin-top: 16rpx;
		margin-left: 10rpx;

	}

	.tabActive::after {
		width: 100%;
		content: "";
		position: absolute;
		bottom: 0rpx;
		height: 4rpx;
		background: #000000;
		left: 0;
	}

	.scroll-list {
		width: 100%;
		white-space: nowrap;
	}

	.scroll-list ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.search {
		width: 29rpx;
		height: 33rpx;
	}

	.search-text {
		width: 100%;
		height: 66rpx;
	}

	.kefu {
		width: 58rpx;
		height: 58rpx;
	}

	.goods-item {
		width: calc(50% - 10rpx);
		overflow: hidden;

		.goods-img {
			width: 100%;
			height: 361rpx;
		}

		.proName {
			height: 100rpx;
		}

		.zq-label {
			background: #FF0000;
			border-radius: 4rpx;
			padding: 2rpx 8rpx;
			margin-right: 8rpx;
		}

		.gxz-lable {
			border: 2rpx solid #FF0000;
			border-radius: 8rpx;
			color: #FF0000;
			padding: 2rpx 8rpx;
			margin-left: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
		}
	}

	.scroll-cate {
		white-space: nowrap;
		box-sizing: border-box;
		padding: 24rpx 0;
		height: 194rpx;

		.scroll-cate-item {
			display: inline-block;
			background: linear-gradient(#ffffff, #ffe2e6);
			border-radius: 16rpx;
			padding: 16rpx 4rpx;
			width: 120rpx;
			margin: 0 16rpx;

			>image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 100%;
				margin: 0 auto;
			}

			>view {
				width: 120rpx;
				font-size: 22rpx;
				margin-top: 16rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.text-red {
		border: 1px solid #ff0012;
	}
</style>